<template>
	<view class="prizeComment">
		<!-- <view class="prizeOneBox flex">
			<image src="https://cdn.uviewui.com/uview/album/4.jpg"></image>
			奖品评价
		</view> -->
		<view class="textareaBox">
			<textarea v-model="comment" placeholder="快来发表获奖感言吧~" style="color: #333;"></textarea>
		</view>
		<view class="submitBtn flex" @click="onOneSub">领取</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pop-box">
				<view style="padding: 30rpx;font-weight: 600;color: #41644A;">收货地址</view>
				<view class="order-address" v-if="noAddress">
					<view class="flex align" style="justify-content: center;"
						@click="$toPage('/package/mine/setAddress/setAddress?setNew=true')">
						<image src="https://wx.2024csnl.com/static/goods/order-add.png" mode="aspectFill" class="order-add" />
						<view class="add-address">添加地址</view>
					</view>
				</view>
				<view class="order-address address-checked" v-else
					@click="onSkip('/package/mine/myAddress/myAddress?pageType=true')">
					<view class="between align">
						<view class="address-info">{{addressMsg.area}}{{addressMsg.address}}</view>
						<image src="https://wx.2024csnl.com/static/goods/into-black.png" mode="aspectFill" class="into" />
					</view>
					<view class="info">
						<view>{{addressMsg.name}}</view>
						<view>{{addressMsg.tel}}</view>
					</view>
				</view>

				<button class="confirm-btn" @click="onSubBtn">确认领取</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		shippingAddress,
		getPrize
	} from "../../api/index.js"
	export default {
		data() {
			return {
				addressMsg: {},
				isAddress: false,
				comment: '',
				id: '',
				pageType: '',
				noAddress: false, //是否有地址
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.pageType = opt.pageType
			this.getShippingAddress()
		},
		async onShow() {
			// 选取地址
			uni.$on('selectAddress', async (data) => {
				this.addressMsg = data
			})
			// 监听是否刷新
			uni.$on('refresh', async (data) => {
				// console.log('监听到刷新,', data)
				this.getShippingAddress()
			})
		},
		beforeDestroy() {
			uni.$off('selectAddress');
		},
		methods: {
			onOneSub() {
				this.comment == '' ? this.showToast('请填写获奖感言~') : this.open('popup')
			},
			// 确认领取
			async onSubBtn() {
				if (this.addressMsg == null) {
					this.showToast('请完善收货地址~')
				} else {
					const {
						name,
						tel,
						address,
						area
					} = this.addressMsg
					let addMsg = {
						name: name,
						phone: tel,
						address: address,
						area: area
					}
					const res = await getPrize('s=/ApiChoujiang/subinfo', {
						rid: this.id,
						formcontent: addMsg,
						speech: this.comment
					})
					const {
						status,
						msg
					} = res.data
					// console.log(res, 'resjdj')
					this.showToast(msg)
					if (status == 1) {
						this.close('popup')
						this.goBack(2000)
					}
				}
			},
			// 地址列表
			async getShippingAddress() {
				this.noAddress = false
				const res = await shippingAddress('s=/ApiAddress/address')
				const {
					data,
					status,
					msg
				} = res.data
				// console.log(res, "地址")
				if (status == 1) {
					// console.log(data, "***")
					data.length != 0 ? this.addressMsg = data[0] : this.noAddress = true

				} else {
					this.showToast(msg)
				}
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.order-address {
		margin: 20rpx;
		background: #f7f7f7;
		border-radius: 20rpx;
		padding: 18rpx 20rpx;
		padding-bottom: 4rpx;
		min-height: 160rpx;

		.address-info {
			font-size: 29rpx;
			width: 580rpx;
		}

		.info {
			color: #999999;
			font-size: 27rpx;
			margin: 20rpx 0;
		}

		.order-add {
			width: 32rpx;
			height: 32rpx;
			margin-right: 15rpx;
		}

		.add-address {
			color: #41644A;
			line-height: 160rpx;
			text-align: center;
		}
	}

	.pop-box {
		background-color: #FFF;
		padding: 30rpx 20rpx;
		height: 25vh;
		overflow-y: auto;
	}

	.confirm-btn {
		position: fixed;
		bottom: 30rpx;
		width: 95vw;
		background-color: #41644A;
		color: #FFF;
		margin-top: 56rpx;
	}

	.submitBtn {
		margin: 117rpx 0;
		color: #fff;
		font-size: 34rpx;
		background: #41644A;
		border-radius: 14rpx;
		padding: 20rpx 0;
		justify-content: center;
	}

	.textareaBox {
		position: relative;
		margin-top: 20rpx;

		image {
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
		}

	}

	textarea {
		border-radius: 30rpx;
		height: 400rpx;
		width: 91%;
		padding: 31rpx;
		color: #B3B3B3;
		background: #F7F7F7;
		font-size: 32rpx;
	}

	.prizeComment {
		padding: 20rpx 30rpx;
	}

	.prizeOneBox {
		align-items: center;
		color: #333;
		font-size: 32rpx;
		font-weight: 500;

		image {
			width: 100rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: 0 45rpx 0 20rpx;
		}
	}
</style>
